<template>
  <view :style="[componentStyle]" class="x-product-list">
    <block v-if="isFetch">
      <view v-if="productList && productList.length" class="m-goods-list">
        <view v-for="(item,index) in productList" :key="index" class="li">
          <x-product :detail="item" :sign="sign" :buying="listBuying" :source="source" :sourcePageId="sourcePageId" :sourcePageType="sourcePageType" />
        </view>
      </view>
      <view v-else-if="productList && productList.length === 0" class="m-empty">
        <x-empty type="goods" content="暂无商品"/>
      </view>
      <!--loading-->
      <x-loading v-if="pagination.loading" />
    </block>
    <block v-else>
      <view :class="['m-goods-list', {'is-single': detail.templateType === 2}]">
        <view v-for="(item,index) in configProductList" :key="index" class="li">
          <x-product :sourcePageId="sourcePageId" :sourcePageType="sourcePageType" :detail="item" :sign="sign" :buying="listBuying" :single="detail.templateType === 2" :source="source" />
        </view>
      </view>
    </block>
  </view>
</template>

<script>
import XProduct from '@/components/x-product';
import XEmpty from '@/components/x-empty';
import XLoading from '@/components/x-loading';
export default {
  name: 'XProductList',
  components: {
    XProduct,
    XEmpty,
    XLoading
  },
  props: {
    detail: {
      type: Object,
      default: () => ({
        componentContentList: []
      })
    },
    sourcePageType: {
      type: String,
      default: ''
    },
    sourcePageId: {
      type: String,
      default: ''
    },
    // 请求接口获取数据
    isFetch: {
      type: Boolean,
      default: false
    },
    action: {
      type: String,
      default: '/product/app/tiny/product'
    },
    requestData: {
      type: Object,
      default: () => ({})
    },
    // 购买按钮
    buying: {
      type: [Object, String],
      default: ''
    },
    // 来源
    source: {
      type: String,
      default: 'list'
    }
  },
  data() {
    return {
      productList: null,
      // 分页相关
      pagination: {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  watch: {
    // requestData(val){
    //   if(val){
    //     this.getGoodsList()
    //   }
    // }
  },
  computed: {
    configProductList() {
      return this.detail.componentContentList[0] ? this.detail.componentContentList[0].productList || [] : [];
    },
    componentStyle() {
      return this.detail.componentStyle ? {
        ...this.detail.componentStyle,
        marginBottom: `${this.detail.componentStyle.marginBottom || 0}rpx`
      } : {};
    },
    contentStyle() {
      return this.detail.componentContentList[0] ? this.detail.componentContentList[0].contentStyle || {} : {};
    },
    sign() {
      return this.contentStyle.sign ? this.contentStyle.sign : {};
    },
    listBuying() {
      return this.buying ? this.buying : (this.contentStyle.buying ? this.contentStyle.buying : {});
    }
  },
  created() {

  },
  mounted() {
    if (this.isFetch) {
      this.getGoodsList();
    }
  },
  methods: {
    handleRefresh() {
      this.productList = null;
      this.pagination = {
        more: true,
        loading: false,
        pageNum: 1,
        pageSize: 10
      };
      this.getGoodsList();
    },
    handleReachBottom() {
      this.getGoodsList();
    },
    getGoodsList() {
      // 加载中
      if (this.pagination.loading || !this.pagination.more) return false;
      this.pagination.loading = true;
      this.$http({
        url: this.action,
        data: {
          ...this.requestData,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        }
      }).then(res => {
        if (this.pagination.pageNum === 1) {
          this.productList = res.data || [];
          this.$emit('on-success', this.productList);
        } else {
          this.productList.push(...(res.data || []));
        }
        this.pagination.more = !!res.data.length; // 是否还有下一页
        this.pagination.loading = false;
        this.pagination.pageNum = this.pagination.pageNum += 1; // 请求成功后页码直接+1
        uni.stopPullDownRefresh(); // 完成停止加载
      }).catch(() => {
        if (this.pagination.pageNum === 1) {
          this.productList = [];
        }
        this.pagination.more = false;
        this.pagination.loading = false;
        uni.stopPullDownRefresh(); // 完成停止加载
      });
    }
  }
};
</script>

<style lang="scss">
  .x-product-list{
    .m-goods-list {
      display: flex;
      flex-wrap: wrap;
      padding: 11px;

      .li {
        width: 50%;
        padding: 11px;
      }

      &.is-single{
        display: block;
        .li{ width: 100%; }
      }
    }

    .m-empty {
      height: 80vh;
    }
  }
</style>
